import React, { useState } from 'react';
import {
    View,
    Text,
    StyleSheet,
    FlatList,
    TouchableOpacity,
    Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

interface CouponItem {
    id: string;
    title: string;
    value: number;
    minSpend: number;
    startDate: string;
    endDate: string;
    status: 'unused' | 'used' | 'expired';
}

const YouhuiScreen = () => {
    const [activeTab, setActiveTab] = useState<'all' | 'unused' | 'used' | 'expired'>('all');

    const coupons: CouponItem[] = [
        {
            id: '1',
            title: '万枫酒店优惠券',
            value: 50,
            minSpend: 299,
            startDate: '2015.11.10 00:00',
            endDate: '2015.12.10 23:59',
            status: 'unused'
        },
        {
            id: '2',
            title: '万枫酒店优惠券',
            value: 50,
            minSpend: 299,
            startDate: '2015.11.10 00:00',
            endDate: '2015.12.10 23:59',
            status: 'unused'
        },
        {
            id: '3',
            title: '万枫酒店优惠券',
            value: 50,
            minSpend: 299,
            startDate: '2015.11.10 00:00',
            endDate: '2015.12.10 23:59',
            status: 'used'
        },
        {
            id: '4',
            title: '万枫酒店优惠券',
            value: 50,
            minSpend: 299,
            startDate: '2015.11.10 00:00',
            endDate: '2015.12.10 23:59',
            status: 'used'
        },
        {
            id: '5',
            title: '万枫酒店优惠券',
            value: 50,
            minSpend: 299,
            startDate: '2015.11.10 00:00',
            endDate: '2015.12.10 23:59',
            status: 'expired'
        },
        {
            id: '6',
            title: '万枫酒店优惠券',
            value: 50,
            minSpend: 299,
            startDate: '2015.11.10 00:00',
            endDate: '2015.12.10 23:59',
            status: 'expired'
        }
    ];

    const filteredCoupons = activeTab === 'all'
        ? coupons
        : coupons.filter(coupon => coupon.status === activeTab);

    const renderCouponItem = ({ item }: { item: CouponItem }) => (
        <View style={[
            styles.couponCard,
            item.status === 'unused' && styles.unusedCoupon,
            item.status === 'used' && styles.usedCoupon,
            item.status === 'expired' && styles.expiredCoupon,
        ]}>
            <View style={styles.couponLeft}>
                <Text style={styles.couponTitle}>{item.title}</Text>
                <View style={styles.valueContainer}>
                    <Text style={styles.valueSymbol}>¥</Text>
                    <Text style={styles.valueNumber}>{item.value}</Text>
                </View>
                <Text style={styles.condition}>满{item.minSpend}元减{item.value}元</Text>
            </View>
            <View style={styles.couponRight}>
                <Text style={styles.dateLabel}>使用期限</Text>
                <Text style={styles.dateValue}>{item.startDate}</Text>
                <Text style={styles.dateValue}>{item.endDate}</Text>
            </View>
        </View>
    );

    return (
        <View style={styles.container}>
            <View style={styles.tabContainer}>
                <TouchableOpacity
                    style={[styles.tabButton, activeTab === 'all' && styles.activeTab]}
                    onPress={() => setActiveTab('all')}
                >
                    <Text style={[styles.tabText, activeTab === 'all' && styles.activeTabText]}>
                        全部
                    </Text>
                    {activeTab === 'all' && <View style={styles.activeIndicator} />}
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.tabButton, activeTab === 'unused' && styles.activeTab]}
                    onPress={() => setActiveTab('unused')}
                >
                    <Text style={[styles.tabText, activeTab === 'unused' && styles.activeTabText]}>
                        未使用
                    </Text>
                    {activeTab === 'unused' && <View style={styles.activeIndicator} />}
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.tabButton, activeTab === 'used' && styles.activeTab]}
                    onPress={() => setActiveTab('used')}
                >
                    <Text style={[styles.tabText, activeTab === 'used' && styles.activeTabText]}>
                        已使用
                    </Text>
                    {activeTab === 'used' && <View style={styles.activeIndicator} />}
                </TouchableOpacity>
                <TouchableOpacity
                    style={[styles.tabButton, activeTab === 'expired' && styles.activeTab]}
                    onPress={() => setActiveTab('expired')}
                >
                    <Text style={[styles.tabText, activeTab === 'expired' && styles.activeTabText]}>
                        已过期
                    </Text>
                    {activeTab === 'expired' && <View style={styles.activeIndicator} />}
                </TouchableOpacity>
            </View>

            <FlatList
                data={filteredCoupons}
                renderItem={renderCouponItem}
                keyExtractor={item => item.id}
                contentContainerStyle={styles.listContainer}
                showsVerticalScrollIndicator={false}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    tabContainer: {
        flexDirection: 'row',
        backgroundColor: '#fff',
        paddingTop: 15,
    },
    tabButton: {
        flex: 1,
        alignItems: 'center',
        paddingBottom: 12,
        position: 'relative',
    },
    activeTab: {
        borderBottomWidth: 0,
    },
    activeIndicator: {
        position: 'absolute',
        bottom: 0,
        width: '40%',
        height: 3,
        backgroundColor: '#FFD700',
        borderRadius: 2,
    },
    tabText: {
        fontSize: 14,
        color: '#666',
    },
    activeTabText: {
        color: '#333',
        fontWeight: 'bold',
    },
    listContainer: {
        padding: 15,
    },
    couponCard: {
        flexDirection: 'row',
        borderRadius: 8,
        marginBottom: 15,
        overflow: 'hidden',
        height: 100,
    },
    unusedCoupon: {
        backgroundColor: '#FF4B5C',
    },
    usedCoupon: {
        backgroundColor: '#4CAF50',
    },
    expiredCoupon: {
        backgroundColor: '#9E9E9E',
    },
    couponLeft: {
        flex: 2,
        padding: 15,
        justifyContent: 'center',
    },
    couponTitle: {
        color: '#fff',
        fontSize: 14,
        marginBottom: 5,
    },
    valueContainer: {
        flexDirection: 'row',
        alignItems: 'baseline',
        marginBottom: 5,
    },
    valueSymbol: {
        color: '#fff',
        fontSize: 16,
        marginRight: 2,
    },
    valueNumber: {
        color: '#fff',
        fontSize: 32,
        fontWeight: 'bold',
    },
    condition: {
        color: '#fff',
        fontSize: 12,
    },
    couponRight: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 10,
        justifyContent: 'center',
    },
    dateLabel: {
        color: '#999',
        fontSize: 12,
        marginBottom: 5,
    },
    dateValue: {
        color: '#666',
        fontSize: 11,
    },
});

export default YouhuiScreen; 